<template>
  <div id="app" @click="closeAlert">
    <router-view></router-view>
  </div>
</template>
<script>
import HeadTop from '_components/HeadTop'
import Menu from '_components/Menu'
import Bus from '@/bus.js'

export default {
  components:{
    HeadTop,
    Menu
  },
  data(){
    return {
      editableTabsValue: '',
      editableTabs:[],
      tabIndex: 0,
      tabNames:[]
    }
  },
  created(){
    console.log('PIC_URL:',this.PIC_URL)
    console.log('EWM:',this.EWM)

    let that = this
    this.resize()
    Bus.$off('addTab')
    Bus.$on('addTab',(val)=>{
        that.addTab(val)
    })
  },
  methods:{
    closeAlert(){
      Bus.$emit('closeAlert')
    },
    //适配，设置html的font-size
    resize(){
      var width = window.screen.width;
      var win = window
      var doc = document
      if(width > 1200) {
        //resize
        var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
          recalc = function() {
            var clientWidth = docEl.clientWidth;
            docEl.style.fontSize = 192 * (clientWidth / 1920) + 'px';
          };
        if(!doc.addEventListener) {
          return;
        }
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);

      } else {
        $("html").css("font-size", "62.5px");
      }
    },
    removeTab(targetName){
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);

        this.tabNames.splice(this.tabNames.findIndex(item => item === targetName), 1)
    },
    addTab(title){
      if(this.editableTabs.length > 0){
        if(!this.tabNames.includes(title)){
          this.editableTabs.push({
            title: title,
            name: title
          });   
          this.tabNames.push(title)  
        }   
      }else{
        this.editableTabs.push({
          title: title,
          name: title
        });
        this.tabNames.push(title)
      }
      this.editableTabsValue = title;
    },
    changeTab(n,o){
      this.editableTabsValue = n
      this.$router.push({
        name:router[n]
      })
      // this.$router.push('/'+router[n])
    }
  }
}
</script>

<style lang="less">
@import '~_config/base.css';
@import '~_config/vuebootstraptable.css';
@import '~_config/mixin.less';

.appContainer{
	display:flex;
  .menuBox{
    .wh(270px,984px);
    .bg(#021F4E)
  }
  .appTab .el-tabs__item{
    // .wh(162px,44px);
    height: 44px;
    min-width: 162px;
    border:1px solid rgba(224,238,249,1);
    border-radius:8px 8px 0px 0px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
  }
  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{
    background-color: #fff;
    border-top: 2px solid #3395FF;
  }
  .el-tabs--card>.el-tabs__header{
    border-bottom: none;
    position: relative;
    z-index: 4;
    bottom: -3px;
  }
  .el-tabs--card>.el-tabs__header .el-tabs__nav{
    border:none;
  }
  .el-tabs--card>.el-tabs__header .el-tabs__item{
    margin-right: 4px;
    border:1px solid #E0EEF9;
    background-color: #E0EEF9;
  }
  .el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
    border-left: 0.005208rem solid #E4E7ED
  }
  .el-tabs--card>.el-tabs__header .el-tabs__item .el-icon-close{
    font-size: .1rem;
    // top: -.06rem;
    // right: -.13rem
  }
  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close, .el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close{
    width: .1rem;
  }
}
</style>
